<template>
  <div class="advertisement-center">
    <div class="advertisement-left">
      <Form
        ref="editForm"
        :model="form"
        :rules="diyData.rules"
        :label-width="120"
      >
      <div class="title">新增代理</div>
      <FormItem label="手机号码" prop="title">
          <Input
                  placeholder="请输入用户手机号"
                  v-model="search.phone"
                  maxlength="11"
                  :disabled='query.id?true:false'
                  @on-change="getUserinfoList"
                 style="width:190px"
                />
                <Select
                    v-model="form.id"
                   v-if="search.phone&&apiData.userList.length>0"
                    clearable
                   style="width:200px;margin-left:10px"
                    :disabled='query.id?true:false'
                    @on-change="getUserinfo"
                    :loading="loading">
                    <Option v-for="(option, index) in apiData.userList" :value="option.id" :key="index">{{option.nickname}}</Option>
                </Select>
                <span v-if="search.phone&&apiData.userList.length==0" style="margin-left:10px;color:#ff0000">当前手机号没有绑定用户</span>
        </FormItem>
     
        <FormItem label="头像" prop="imgUrl" v-if="imgUrl">
          <div class="upload-Img">
            <div v-if="imgUrl" class="look-img">
              <img :src="imgUrl" style="width: 100%" />              
            </div>
          </div>
        </FormItem>
         <FormItem label="用户昵称" prop="title" v-if="nickname">
            {{nickname}}
        </FormItem>
         <FormItem label="一级佣金" prop="rate1">
          <Input
                  placeholder="请输入"
                  v-model="form.rate1"
                  class="max-w400"
                />
        </FormItem>
        <FormItem label="二级佣金" prop="rate2">
          <Input
                  placeholder="请输入"
                  v-model="form.rate2"
                  class="max-w400"
                />
        </FormItem>
        <FormItem label="三级佣金" prop="rate3">
          <Input
                  placeholder="请输入"
                  v-model="form.rate3"
                  class="max-w400"
                />
        </FormItem>
         <FormItem label="推广开关" prop="referrerStatus">
             <i-switch true-color="#1890FF" true-value='1' false-value='0' v-model="form.referrerStatus" false-color="#666" />
        </FormItem>
        <FormItem>
          <div class="footer">
            <Button @click="ModalCancel">取消</Button>
            <Button
              style="margin-left: 10px"
              type="primary"
              @click="getConfirm"
              >确认</Button
            >
          </div>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import {apiUserinfoList} from '@/api/user-manage.js'
import {apiAgentInfo,apiAgentSave} from '@/api/agent.js'
export default {
  name: "advertisement-edit",
  data() {
    return {
      loading: false,
     imgUrl:'',
     nickname:'',
     search:{
      pageNo: 1,
        pageSize: 10,
        phone:'',
     },
    
      form: {
        id:'',
       rate1:'',
       rate2:'',
       rate3:'',
       referrerStatus:'',
      },

      // query参数
      query: {},
      // 搜索参数
      diyDom: {},
      diyData: {
        rules: {},
      },
      apiData:{
        userList:[],
      }
    };
  },
  methods: {
    apiAgentInfo(){
    apiAgentInfo({...this.query}).then(res=>{
      this.form={
        id:res.data.info.id,
        rate1:res.data.info.rate1,
        rate2:res.data.info.rate2,
        rate3:res.data.info.rate3,
        referrerStatus:res.data.info.referrerStatus+'',
      }
      if(res.data.info.headImgUrl){
        this.imgUrl=res.data.info.headImgUrl
      }
      if(res.data.info.nickname){
        this.nickname=res.data.info.nickname
      }
      this.search.phone=res.data.info.phone
      this.getUserinfoList()
    })
  },

    getConfirm(){
        var opt={...this.form}
        apiAgentSave(opt).then(res=>{
            if(res.code==200){
                this.$Message.success('操作成功');
                this.$router.go(-1)
            }else{
                this.$Message.error(res.msg)
            }
        })
    },
    ModalCancel(){
      this.$router.go(-1)
    },
    getUserinfoList(e){
      var that=this
      if(this.search.phone.length==11){
        this.loading = true;
          var opt={
            pageNo: 1,
            pageSize: 30,
            phone:this.search.phone
          }
          apiUserinfoList({...opt}).then(res=>{
           setTimeout(() => {
                that.loading = false;
                that.apiData.userList=res.data.list
                if(res.data.list.length==1){
                  
                  that.form.id=res.data.list[0].id
                  that.imgUrl=res.data.list[0].headImgUrl
                  that.nickname=res.data.list[0].nickname
                }
                
            }, 500);
              
        })
      }else{
        //  this.apiData.userList=[]
      }
      
    },
    getUserinfo(e){
      var that=this
       this.apiData.userList.forEach(item=>{
        if(item.id==e){
          that.imgUrl=item.headImgUrl
          that.nickname=item.nickname
        }
      })
    },
  },
  mounted() {
    this.query = this.$route.query;
    if(this.query.id){
      this.form.id=this.query.id
        this.apiAgentInfo()
    }
  },
};
</script>

<style scoped lang="less">
.max-w400{
    max-width: 400px;
    width: 100%;
}
.advertisement-center {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .advertisement-left {
    width:100%;
    background: #fff;
    min-height: 700px;
    padding: 40px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
</style>
